<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <ctm-box @commit="getComment"></ctm-box>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人:{{item.user}}</span>
                {{item.content}}
            </li>
        </ul>
        
    </div>
    <template id="tmp1">
        <div>
            <div class="form-group">
                <label for="">评论人：</label>
                <input type="text" class="form-control" v-model="user">
            </div>

            <div class="form-group">
                <label for="">评论内容:</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            
            <div class="form-group">
                <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
            </div>
        </div>
    </template>
    <script>
        var commentBox = {
            data(){
                return {
                    user:"",
                    content:""
                }
            },
            template:"#tmp1",
            methods:{
                postComment(){
                    // 发表评论的业务逻辑
                    // 1. 组件获取的数据 返回给Vue实例
                    console.log(this.user);
                    this.$emit("commit",this.user,this.content);
                }
            }
        }
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:Date.now(),user:"江小白",content:"我想记起过去"},
                    {id:Date.now(),user:"佟离",content:"命运请垂青于我"},
                    {id:Date.now(),user:"夕雨",content:"对不起"}
                ]
            },
            methods:{
                getComment(user,content){
                    this.list.push({id:Date.now(),user:user,content:content});
                }
            },
            components:{
                "ctm-box":commentBox
            }
        })
    
    </script>
</body>
</html>